<template>
    <div class="detail">
      <home-header></home-header>
      <home-nav :navIndex="navIndex"></home-nav>
      <div class="content">
        <bread-crumb :title="movies.title"></bread-crumb>
        <brief-card :movies="movies" :index="navIndex"></brief-card>
        <play-source :urlList="urlList" :pageList="pageList" @playMovie="playMovie"></play-source>
        <like></like>
      </div>
      <bottom></bottom>
    </div>
</template>

<script>
import HomeHeader from '@/components/HomeHeader'
import HomeNav from '@/components/HomeNav'
import Bottom from '../components/Bottom'
import Like from '@/components/Like'
import BriefCard from '@/components/BriefCard'
import BreadCrumb from '@/components/BreadCrumb'
import PlaySource from '@/components/PlaySource'
import {getMovieInfo} from '@/api/movieList'
import {getMovieDetailInfo} from '@/api/movieDetail'
export default {
  name: 'Detail',
  components: {
    HomeHeader,
    HomeNav,
    Bottom,
    BriefCard,
    BreadCrumb,
    PlaySource,
    Like
  },
  data () {
    return {
      navIndex: 0,
      movies: {},
      urlList: [],
      pageList: [],
      id: ''
    }
  },
  created () {
    this.id = this.$route.query.id
    this.navIndex = this.$route.query.index
    this.fetchData()
    this.fetchSeries()
  },
  methods: {
    changeUrl (item) {},
    playMovie (item) {
      let routeUrl = this.$router.resolve({
        path: '/play',
        query: {url: item.url, id: this.id, name: item.txt}
      })
      window.open(routeUrl.href, '_blank')
      // this.$router.push({path: '/play',query:{url:item.url,name:item.txt}})
    },
    fetchData () {
      let params = {
        source_id: this.id
      }
      getMovieInfo(params).then(response => {
        this.movies = response.data
        document.title = this.movies.title
      })
    },
    fetchSeries () {
      let params = {
        source_id: this.id
      }
      getMovieDetailInfo(params).then(response => {
        let data = response.data
        for (let i = 0; i < data.video_type.length; i++) {
          this.urlList.push({'txt': data.video_type[i]})
        }
        this.pageList = response.data.video_series
      })
    },
    watchrouter () { // 如果路由有变化，执行的对应的动作
      this.id = this.$route.query.id
      this.urlList = []
      this.fetchData()
      this.fetchSeries()
    },
    reverse () {
      this.pageList = this.pageList.reverse()
    }
  },
  watch: {
    $route: 'watchrouter'
  }
}
</script>

<style lang="scss" scoped>
.detail{
  .content{
    width: 980px;
    margin: auto;
  }
}
</style>
